<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/echarts.min.js" charset="utf-8"></script>
    <script src="/js/vue.js" type="text/javascript" crossorigin="anonymous"></script>
    <script src="/bootstrap/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="/element-ui/index.css">
    <script src="/element-ui/index.js"></script>
    <script src="/vue/axios.min.js"></script>
    <!--    <script src="../../static/js/echarts.min.js" charset="utf-8"></script>-->


<!--    <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>-->
<!--    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
<!--    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">-->

<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<!--    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>-->

</head>
<body>
<div id="app">
    <p>{{ message }}</p>
<!--    <el-button @click="visible = true">Button</el-button>-->
<!--    <el-dialog :visible.sync="visible" title="Hello world">-->
<!--        <p>Try Element</p>-->
<!--    </el-dialog>-->

    <div class="row" >
        <div class="col-md-4"></div>
        <div class="block">
            <span class="demonstration">时间:</span>
            <el-date-picker
                    v-model="tradeDate"
                    type="date"
                    @change="change"
                    value-format="yyyyMMdd"
                    placeholder="选择日期">
            </el-date-picker>
        </div>
        <div class="col-md-4"></div>
    </div>
    <div class="row" >
        <div id="topRiseChart" class="col-md-6" style="width: 800px;height:400px;"></div>
        <div id="topFallChart" class="col-md-6" style="width: 800px;height:400px;"></div>
    </div>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!',
            tradeDate: '20210811',//20210805
            visible: false
        },
        // watch: {
        //     tradeDate: function (x) {
        //         this.tradeDate = x;
        //         this.initTopRiseChart()
        //         this.initTopFallChart()
        //     }
        // },
        mounted: function() {
            this.initTopRiseChart()
            this.initTopFallChart()
        },
        methods: {
            change(x) {
                // 确定时间范围之后触发的函数
                // console.log(111)
                // console.log(x)
                this.tradeDate = x;
                this.initTopRiseChart()
                this.initTopFallChart()
            },
            toggleClick: function(){
                console.log(111)
            },
            initTopRiseChart: function(){
                var myChart = echarts.init(document.getElementById('topRiseChart'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '行业涨停TOP5'
                    },
                    tooltip: {},
                    legend: {
                        data:['涨停企业数量']
                    },
                    yAxis: {
                        // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    xAxis: {},
                    series: [{
                        name: '涨停企业数量',
                        type: 'bar',
                        // data: [5, 20, 36, 10, 10, 20]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                // myChart.setOption(option);

                axios.get('/stockIndustry/getDataByDate?tradeDate='+this.tradeDate)
                    .then(function (response) {
                        console.log(response);
                        option.yAxis.data = response.data.data.json1.map(x=>x.INDUSTRY);
                        option.series[0].data = response.data.data.json1.map(x=>x.CNT);
                        option && myChart.setOption(option);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            initTopFallChart: function(){
                var myChart = echarts.init(document.getElementById('topFallChart'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '行业跌停TOP5'
                    },
                    color : [ '#04bd2c', '#E0022B', '#E09107', '#A3E00B' ],
                    tooltip: {},
                    legend: {
                        data:['跌停企业数量']
                    },
                    yAxis: {
                        // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    xAxis: {},
                    series: [{
                        name: '跌停企业数量',
                        type: 'bar',
                        // data: [5, 20, 36, 10, 10, 20]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                // myChart.setOption(option);
                axios.get('/stockIndustry/getDataByDate?tradeDate='+this.tradeDate)
                    .then(function (response) {
                        console.log(response);
                        option.yAxis.data = response.data.data.json2.map(x=>x.INDUSTRY);
                        option.series[0].data = response.data.data.json2.map(x=>x.CNT);
                        option && myChart.setOption(option);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    })
</script>
</body>
</html>